<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
<title>新增</title>
<link rel="icon" href="favicon.ico" type="image/ico">
<link href="/Public/Admin/css/bootstrap.min.css" rel="stylesheet">
<link href="/Public/Admin/css/materialdesignicons.min.css" rel="stylesheet">
<link href="/Public/Admin/js/bootstrap-datepicker/bootstrap-datepicker3.min.css" rel="stylesheet">
<link href="/Public/Admin/js/bootstrap-datetimepicker/bootstrap-datetimepicker.min.css" rel="stylesheet">
<link href="/Public/Admin/js/bootstrap-clockpicker/bootstrap-clockpicker.min.css" rel="stylesheet">
<!--标签插件-->
<link rel="stylesheet" href="/Public/Admin/js/jquery-tagsinput/jquery.tagsinput.min.css">
<link href="/Public/Admin/css/style.min.css" rel="stylesheet">
</head>

<style type="text/css">
* {
	margin: 0px;
	padding: 0px;
	font-family: Microsoft Yahei;
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
}
.demo {
	margin: 0 auto;
	min-width: 320px;
	max-width: 640px;
}
.ul_pics {
	float: left;
}
.ul_pics li {
	float: left;
	margin: 0px;
	padding: 0px;
	margin-left: 5px;
	margin-top: 5px;
	position: relative;
	list-style-type: none;
	border: 1px solid #eee;
	width: 80px;
	height: 80px;
}
.ul_pics li img {
	width: 80px;
	height: 80px;
}
.ul_pics li i {
	position: absolute;
	top: 0px;
	right: -1px;
	background: red;
	cursor: pointer;
	font-style: normal;
	font-size: 10px;
	width: 14px;
	height: 14px;
	text-align: center;
	line-height: 12px;
	color: #fff;
}
.progress {
	position: relative;
	margin-top: 30px;
	background: #eee;
}
.bar {
	background-color: green;
	display: block;
	width: 0%;
	height: 15px;
}
.percent {
	position: absolute;
	height: 15px;
	top: -18px;
	text-align: center;
	display: inline-block;
	left: 0px;
	width: 80px;
	color: #666;
	line-height: 15px;
	font-size: 12px;
}
.demo #btn {
	width: 80px;
	height: 80px;
	margin-left: 5px;
	margin-top: 5px;
	border: 1px dotted #c2c2c2;
	background: url("/Public/Admin/image/add.jpg") no-repeat center;
	background-size: 60px auto;
	text-align: center;
	line-height: 120px;
	font-size: 30px;
	color: #666;
	float: left;
}
</style>
<body>
<div class="container-fluid p-t-15">
  <div class="col-lg-12">
    <div class="card">
      <header class="card-header">
        <div class="card-title">步骤</div>
      </header>
      <div class="card-body">
        <ul class="nav nav-step nav-fill">
          <li class="nav-item"> <span>活动基本信息</span> <a class="nav-link active" href="#"></a> </li>
          <li class="nav-item"> <span>捐赠书籍添加</span> <a class="nav-link" href="#"></a> </li>
          <li class="nav-item"> <span>完成</span> <a class="nav-link" href="#"></a> </li>
        </ul>
      </div>
    </div>
  </div>
  <div class="row">
    <div class="col-lg-12">
      <div class="card">
        <div class="card-body">
          <form action="#" method="post" name="addActivity" id="addActivity" class="addActivity">
            <div class="form-group col-md-12">
              <label for="seo_description">活动名</label>
              <input class="form-control" type="text" id="activity_name" name="activity_name" value="" />
            </div>
            <div class="form-group col-md-12">
              <label for="tags">活动地点</label>
              <input class="form-control" type="text" id="activity_place" name="activity_place" value="" />
            </div>
            <div class="form-group col-md-12">
              <label for="sort">合作方1</label>
              <input type="text" class="form-control" id="activity_partner_a" name="activity_partner_a" value="" />
              <label for="sort">合作方2</label>
              <input type="text" class="form-control" id="activity_partner_b" name="activity_partner_b" value="" />
              <label for="sort">合作方3</label>
              <input type="text" class="form-control" id="activity_partner_c" name="activity_partner_c" value="" />
            </div>
            <div class="form-group col-md-12">
              <label for="sort">受益方</label>
              <input type="text" class="form-control" id="activity_recipient" name="activity_recipient" value="" />
            </div>
            <div class="form-group col-md-12">
              <label for="sort">开始时间</label>
              <input type="text" data-side-by-side="true" data-provide="datetimepicker" class="form-control" id="activity_begin" name="activity_begin" value="" data-format="YYYY-MM-DD HH:mm:ss" />
            </div>
            <div class="form-group col-md-12">
              <label for="sort">金额</label>
              <input type="text" class="form-control" id="activity_money" name="activity_money" value="" />
            </div>
            <div class="form-group col-md-12">
              <label for="sort">活动类型（0对外、1对内）</label>
              <br>
              <div class="custom-control custom-radio custom-control-inline">
                <input type="radio" id="activity_type1" name="activity_type" class="custom-control-input" value="0">
                <label class="custom-control-label" for="activity_type1">对外捐赠</label>
              </div>
              <div class="custom-control custom-radio custom-control-inline">
                <input type="radio" id="activity_type2" name="activity_type" class="custom-control-input"  value="1">
                <label class="custom-control-label" for="activity_type2">内部活动</label>
              </div>
            </div>
            <label for="seo_description">添加图片(第一张图片务必上传活动封面)</label>
            <div class="demo"> <a href="javascript:void(0)" rel="external nofollow" id="btn"></a>
              <ul id="ul_pics" class="ul_pics clearfix">
              </ul>
            </div>
            <br>
            <br>
            <br>
            <br>
            <br>
            <div class="form-group col-md-12">
              <button id="submitbtn" type="submit" class="btn btn-success ajax-post confirm" target-form="addActivity">确 定</button>
              <button type="button" class="btn btn-default" onclick="javascript:history.back(-1);return false;">返 回</button>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>
</div>
<script type="text/javascript" src="/Public/Admin/js/jquery.min.js"></script> 
<script type="text/javascript" src="/Public/Admin/js/bootstrap.min.js"></script> 
<script type="text/javascript" src="/Public/Admin/js/perfect-scrollbar.min.js"></script> 
<!--时间日期选择器--> 
<script type="text/javascript" src="/Public/Admin/js/moment.js/moment.min.js"></script> 
<script type="text/javascript" src="/Public/Admin/js/bootstrap-datetimepicker/bootstrap-datetimepicker.min.js"></script> 
<script type="text/javascript" src="/Public/Admin/js/moment.js/locale/zh-cn.min.js"></script> 
<!--标签插件--> 
<script src="/Public/Admin/js/jquery-tagsinput/jquery.tagsinput.min.js"></script> 
<script type="text/javascript" src="/Public/Admin/js/main.min.js"></script> 
<script type="text/javascript" src="/Public/Admin/js/bootstrap-notify.min.js"></script> 
<script type="text/javascript" src="/Public/Admin/js/lyear-loading.js"></script> 
<script type="text/javascript" src="/Public/Admin/js/plupload.full.min.js"></script> 
<script type="text/javascript">
//上传图片
var uploader = new plupload.Uploader({ //创建实例的构造方法
    runtimes: 'html5,flash,silverlight,html4',
    //上传插件初始化选用那种方式的优先级顺序
    browse_button: 'btn',
    // 上传按钮
    url: "/admin.php?c=Activity&a=upImg",
    resize: {
        width: 100,
        height: 100,
        crop: true,
        quality: 50,
        preserve_headers: false
    },
    //远程上传地址，用php的$_SERVER["PHP_SELF"]获取当前脚本，使其动态化，以免更改admin.php文件名后失效
    flash_swf_url: 'plupload/Moxie.swf',
    //flash文件地址
    silverlight_xap_url: 'plupload/Moxie.xap',
    //silverlight文件地址
    filters: {
        max_file_size: '10mb',
        //最大上传文件大小（格式100b, 10kb, 10mb, 1gb）
        mime_types: [ //允许文件上传类型
        {
            title: "files",
            extensions: "jpg,png,gif,jpeg"
        }]
    },
    multi_selection: false,
    //true:ctrl多文件上传, false 单文件上传
    init: {
        FilesAdded: function(up, files) { //文件上传前
            if (uploader.files.length >9) {//判断文件是否大于九个，阻止上传
                //$("#ul_pics").children("li").length > 30
                alert("您上传的图片太多了！");
                uploader.destroy();
            } else {
                var li = '';
                plupload.each(files,
                function(file) { //遍历文件
                    li += "<li id='" + file['id'] + "'><div class='progress'><span class='bar'></span><span class='percent'>0%</span></div></li>";
                });
                $("#ul_pics").append(li);
                uploader.start();
            }
        },
        UploadProgress: function(up, file) { //上传中，显示进度条
            $("#" + file.id).find('.bar').css({
                "width": file.percent + "%"
            }).find(".percent").text(file.percent + "%");
        },
        FileUploaded: function(up, file, info) { //文件上传成功的时候触发
            var data = JSON.parse(info.response);
            $("#" + file.id).html("<div class='img'><img src='" + data.pic + "'/></div>");
            $("#addActivity").append("<input type='hidden' name='pic[]' value='"+data.pic+"' />")
        },
        Error: function(up, err) { //上传出错的时候触发
            alert(err.message);
        }
    }
});

uploader.init();
	
	
$("#submitbtn").click(function(){
  $.post("?c=Activity&a=addActivity",
  $('#addActivity').serialize(),
  function(id){
      if(id!=0){
		  console.log(id);
          $.notify({
    		// options
    		message: '成功新增<br>点击本消息添加捐赠书籍',
    		url: '?c=Activity&a=addActivityBookView&id='+id,
    		target: '_self'
		  },{
    		// settings
    		type: 'info',
    		delay: 0,
    		placement: {
    		from: "top",
    		align: "right"
    		}
		  });
      }
      else{
          $.notify({
    		// options
    		message: '失败<br>请检查后重试',
    		//url: '?c=User&a=showUser',
    		//target: '_self'
		  },{
    		// settings
    		type: 'danger',
    		delay: 5000,
    		placement: {
    		from: "top",
    		align: "right"
    		}
		  });
      }
	  
});
//这里return false了就能不刷新了
return false;
});
</script>
</body>
</html>